<template>
  <ElPopover ref="popoverRef" trigger="click" :width="236">
    <template #reference>
      <ElButton :icon="modelValue">{{ modelValue ? modelValue : '未选择' }}</ElButton>
    </template>
    <div class="icon-picker">
      <div
        v-for="icon in globalProperties.$icons"
        :key="icon"
        :class="[icon, 'icon', { 'icon-active': icon == modelValue }]"
        @click="onIconClicked(icon)">
        <!-- <ElTooltip effect="dark" placement="top" :content="icon"> -->
        <component :is="icon" />
        <!-- </ElTooltip> -->
      </div>
    </div>
    <div class="footer">
      <ElButton type="primary" icon="Close" @click="clear">清除</ElButton>
    </div>
  </ElPopover>
</template>
<script setup lang="ts" name="IconPicker">
import { ComponentInternalInstance, getCurrentInstance, ref } from 'vue'
import { ElButton, ElPopover } from 'element-plus'

const {
  appContext: {
    app: {
      config: { globalProperties }
    }
  }
} = getCurrentInstance() as ComponentInternalInstance
interface Props {
  modelValue?: string
}
const popoverRef = ref()
defineProps<Props>()
const emits = defineEmits(['update:modelValue'])

const onIconClicked = (icon: any) => {
  console.log(icon)
  emits('update:modelValue', icon)
  popoverRef.value.hide()
}

function clear() {
  onIconClicked(undefined)
}
</script>

<style scoped>
.icon-picker {
  height: 256px;
  overflow-y: scroll;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  color: var(--el-text-color-regular);
  font-size: 20px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  line-height: 45px;
  margin: 5px;
}
.icon:hover {
  color: var(--el-color-primary);
}
.icon-active {
  color: var(--el-color-primary);
}
.footer {
  margin-top: 12px;
}
</style>
